<template>
  <div class="app-container">
    <el-card shadow="hover">
      <h4 class="mt-0">查询状态</h4>
      <el-input
        v-model="searchName"
        placeholder="用户名 | 题目序号 | 标题"
        style="width: 12rem;"
        @keyup.enter.native="listStatus"
        @input="listStatus"
      />
      <el-select
        v-model="languageList"
        multiple
        collapse-tags
        style="margin-left: 20px;"
        placeholder="请选择语言"
        @change="selectLanguage"
      >
        <el-option
          v-for="item in languageOptions"
          :key="item.num"
          :label="item.label"
          :value="item.num"
        />
      </el-select>
      <el-select
        v-model="resultList"
        multiple
        collapse-tags
        style="margin-left: 20px;"
        placeholder="请选择结果"
        @change="selectResult"
      >
        <el-option
          v-for="item in resultMap"
          :key="item.num"
          :style="{color: resultMap[item.num].color}"
          :label="item.result"
          :value="item.num"
        />
      </el-select>
      <el-button
        type="primary"
        icon="el-icon-search"
        style="margin-left: 20px;"
        @click="listStatus"
      >搜索
      </el-button>
    </el-card>
    <el-card style="margin-top: 1rem" shadow="hover">
      <el-table
        :data="statusData"
        stripe
        :default-sort="{prop: 'inDate', order: 'descending'}"
        @sort-change="headerClick"
      >
        <el-table-column prop="title" label="题目">
          <template slot-scope="scope">
            <div v-if="!scope.row.title" style="color: #e74c3c">已删除</div>
            <el-link v-if="scope.row.title" type="primary" @click="goEditor(scope.row.problemId)">{{ scope.row.title }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="nick" label="用户">
          <template slot-scope="scope">
            <div v-if="!scope.row.nick" style="color: #e74c3c">已注销</div>
            <el-link v-if="scope.row.nick" type="primary" @click="goProfile(scope.row.userId)">{{ scope.row.nick }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="result" label="结果" width="250">
          <template slot-scope="scope">
            <el-link :style="{color: resultMap[scope.row.result].color,fontWeight: 'bold'}" @click="goCode(scope.row.solutionId)">
              {{ resultMap[scope.row.result].result }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="memory" label="内存" sortable>
          <template slot-scope="scope">
            {{ scope.row.memory }} KB
          </template>
        </el-table-column>
        <el-table-column prop="time" label="耗时" sortable>
          <template slot-scope="scope">
            {{ scope.row.time }} ms
          </template>
        </el-table-column>
        <el-table-column prop="language" label="语言">
          <template slot-scope="scope">
            {{ showLanguage(scope.row.language).label }}
          </template>
        </el-table-column>
        <el-table-column prop="codeLength" label="代码长度" sortable>
          <template slot-scope="scope">
            {{ scope.row.codeLength }} bytes
          </template>
        </el-table-column>
        <el-table-column prop="inDate" label="提交时间" sortable width="200" />
      </el-table>
      <el-pagination
        style="margin-top: 20px;"
        background
        :current-page="currentPage"
        :page-sizes="[10, 25, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import { languageOptions, resultMap } from '@/utils/global'
import { listStatus } from '@/api/solution'

export default {

  data() {
    return {
      searchName: '',
      currentPage: 1,
      pageSize: 10,
      totalNum: 0,
      sort: 8,
      statusData: [],
      languageList: [],
      resultList: [],
      languageOptions: languageOptions,
      resultMap: resultMap
    }
  },
  mounted() {
    this.listStatus()
  },
  methods: {
    listStatus() {
      const languageList = this.languageList.toString()
      const listResult = this.resultList.toString()
      listStatus({
        current: this.currentPage,
        size: this.pageSize,
        sort: this.sort,
        name: this.searchName,
        languageList: languageList,
        listResult: listResult
      }).then(res => {
        this.totalNum = parseInt(res.data.total)
        this.statusData = res.data.records
      })
    },
    showLanguage(item) {
      return this.languageOptions.find(t => t.num === Number(item))
    },
    headerClick(event) {
      const params = [['memory', 1], ['time', 3], ['codeLength', 5], ['inDate', 7]]
      const sortMap = new Map(params)
      if (event.order === null) {
        this.sort = 8
        this.listStatus()
        return
      }
      if (event.order === 'descending') {
        sortMap.set(event.prop, sortMap.get(event.prop) + 1)
      }
      this.sort = sortMap.get(event.prop)
      this.listStatus()
    },
    goEditor(problemId) {
      this.$router.push({
        path: '/editor',
        query: { problemId: problemId }
      })
    },
    goProfile(userId) {
      this.$router.push({
        path: '/profile',
        query: { userId: userId }
      })
    },
    goCode(solutionId) {
      this.$router.push({
        path: '/code',
        query: { solutionId: solutionId }
      })
    },
    selectResult() {
      this.listStatus()
    },
    selectLanguage() {
      this.listStatus()
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.listStatus()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.listStatus()
    }
  }

}
</script>

<style scoped>

</style>
